<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-form label-width="70px" size="small">
          <el-row :gutter="10" class="flex">
            <el-col
              :xs="24"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="6"
              align="center"
              style="margin-top: 5px"
            >
              <el-form-item label="业务日期">
                <div class="flex flex-row">
                  <el-date-picker
                    v-model="query.startDate"
                    align="right"
                    unlink-panels
                    style="width: 50%"
                    format="yyyy - MM - dd "
                    value-format="yyyy-MM-dd"
                    default-value
                    range-separator=""
                    placeholder="开始日期"
                  />
                  <el-date-picker
                    v-model="query.endDate"
                    align="right"
                    unlink-panels
                    style="width: 50%"
                    format="yyyy - MM - dd "
                    value-format="yyyy-MM-dd"
                    default-value
                    range-separator=""
                    placeholder="结束日期"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="单据类型">
                <el-select
                  v-model="sourceType"
                  collapse-tags
                  multiple
                  class="edit-input"
                  placeholder="请选择单据状态"
                  style="width: 100%"
                  @change="change"
                >
                  <el-option
                    v-for="(item, index) in sourceTypeList"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="往来单位">
                <!--                <zSelect multiple :value.sync="customerIds"  url="/api/dropDown/basCustomerList" style="width:  100%;"/>-->
                <table-select
                  :tableColumns="[
                    { prop: 'code', label: '单位编码', width: '100' },
                    { prop: 'name', label: '往来单位名称', width: '280' },
                  ]"
                  :value.sync="query.contactIds"
                  placeholder="请选择往来单位"
                  url="/api/dropDown/basCustomerList"
                ></table-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="商品名称">
                <table-select
                  :tableColumns="[
                    { prop: 'goodsCode', label: '商品编码', width: '100' },
                    { prop: 'goodsName', label: '商品名称', width: '280' },
                  ]"
                  labelKey="goodsName"
                  valueKey="goodsId"
                  :value.sync="query.goodsIds"
                  placeholder="请选择商品"
                  url="/api/dropDown/basGoodsListForAdd"
                />
                <!-- <zSelect :value.sync="query.goodsName"  url="api/dropDown/basGoodsList" style="width: 100%;"/> -->
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="工资方案" prop="payPlanName">
                <table-select
                  :tableColumns="[
                    { prop: 'id', label: '工资编码', width: '100' },
                    { prop: 'planName', label: '工资方案', width: '280' },
                  ]"
                  labelKey="planName"
                  valueKey="id"
                  :value.sync="query.payPlanIds"
                  placeholder="请选择工资方案"
                  url="/api/dropDown/payPlanList"
                />
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="6"
              align="center"
              style="margin-top: 5px"
            >
              <div>
                <span>
                  <el-button
                    class="filter-item"
                    size="mini"
                    type="primary"
                    @click="crud.toQuery"
                    >搜索</el-button
                  >
                  <el-button
                    class="filter-item"
                    plain
                    size="mini"
                    type="primary"
                    @click="resetQuery()"
                    >重置</el-button
                  >
                </span>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <div class="body-container">
      <!--表格渲染-->
      <el-table
        ref="table"
        border
        height="700"
        show-summary
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%"
        :summary-method="crud.sumRow"
        @row-click="crud.selectRow"
        :row-style="crud.rowClass"
        :row-class-name="crud.tableRowClassName"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column
          :render-header="crud.renderHeader"
          type="selection"
          width="60"
        />
        <el-table-column
          :render-header="crud.renderHeader"
          v-if="columns.visible('payPlanName')"
          prop="payPlanName"
          label="工资方案"
        />

        <el-table-column
          :render-header="crud.renderHeader"
          v-if="columns.visible('busDate')"
          prop="busDate"
          label="业务日期"
        />
        <el-table-column
          :render-header="crud.renderHeader"
          v-if="columns.visible('sourceType')"
          prop="sourceType"
          label="单据类型"
        >
          <template slot-scope="scope">
            {{ sourceTypeList[Number(scope.row.sourceType) - 1] }}
          </template>
        </el-table-column>
        <el-table-column
          :render-header="crud.renderHeader"
          v-if="columns.visible('sourceCode')"
          prop="sourceCode"
          label="单据编号"
        />
        <el-table-column
          :render-header="crud.renderHeader"
          v-if="columns.visible('contactName')"
          prop="contactName"
          label="往来单位"
        />

        <el-table-column
          :render-header="crud.renderHeader"
          v-if="columns.visible('goodsName')"
          prop="goodsName"
          label="商品名称"
        />
        <el-table-column
          :render-header="crud.renderHeader"
          v-if="columns.visible('boxCount')"
          prop="boxCount"
          label="箱数"
        />
        <el-table-column
          :render-header="crud.renderHeader"
          v-if="columns.visible('goodsCount')"
          prop="goodsCount"
          label="数量"
        />
        <el-table-column
          :render-header="crud.renderHeader"
          v-if="columns.visible('finalSalary')"
          prop="taxAmount"
          label="金额"
        />
        <el-table-column
          :render-header="crud.renderHeader"
          v-if="columns.visible('factor')"
          prop="factor"
          label="系数"
        />
        <el-table-column
          :render-header="crud.renderHeader"
          v-if="columns.visible('performance')"
          prop="performance"
          label="绩效工资"
        />
        <!-- <el-table-column
          :render-header="crud.renderHeader"
          v-permission="['admin', 'basGoods:edit', 'basGoods:del']"
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column> -->
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import salarySettlement from "@/api/erp/salarySettlement";
import CRUD, { crud, form, header, presenter } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
import TreeSelect from "@riophae/vue-treeselect";
let thisDate = new Date().getFullYear() + "-" + new Date().getMonth();
// crud交由presenter持有
const defaultCrud = CRUD({
  title: "结算",
  url: "/api/salarySettlement/getPerformance",
  sort: "id,desc",
  params() {
    const href = location.href.split("/");
    if (href[5].includes("copyId")) {
      return {
        id: 0,
      };
    } else {
      return {
        settlementId:
          href[href.length - 1].split("?")[0] == "add"
            ? 0
            : href[href.length - 1].split("?")[0],
        page: 0,
        size: 999,
      };
    }
  },
  query: {
    contactIds: "",
    endDate: null,
    startDate: null,
    goodsIds: null,
    page: 1,
    size: 20,
    sourceType: [],
    payPlanIds: "",
  },
  crudMethod: { ...salarySettlement },
  optShow: {
    add: false,
    edit: false,
    del: false,
    download: false,
    leadingIn: false,
    enable: false,
    disable: false,
  },
  props: {
    tableColumns: ["name", "code", "type", "sourceType"],
  },
});
const defaultForm = {
  thisDate: thisDate,
  busDate: null,
  deptIds: null,
  userIds: "",
  id: null,
};
export default {
  name: "salarySettlementDetail",
  components: {
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    TreeSelect,
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ["t_business_history_order_type", "receipt_payment_source"],
  data() {
    return {
      date: thisDate,
      multiple: true,
      depts: [],
      sourceType: [],
      payPlanIds: "",
      sourceTypeList: [
        "销售单",
        "采购入库",
        "采购退货",
        "发货单",
        "销售退货入库单",
      ],
      busDate: [],
      permission: {
        //add 不添加权限，这个add按钮自定义
        add: ["admin"],
        edit: ["admin", "basGoods:edit"],
        del: ["admin", "basGoods:del"],
        enable: ["admin", "basGoods:enable"],
        disable: ["admin", "basGoods:disable"],
      },
      rules: {},
      brandList: [],
      typeList: [],
      id: null,
    };
  },
  watch: {
    $route(){
      // location.reload()
    }
  },
  activated() {
    this.crud.toQuery()
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  },
  created() {
    console.log(this.$route.params.id,'333')
  },
  methods: {
    change(val) {
      this.query.sourceType = val;
    },
    queryReport() {
      if (!this.date) {
        this.$message("请先选择年月");
      } else {
        this.query.year = this.date.split("-")[0];
        this.query.month = this.date.split("-")[1];
        this.crud.toQuery();
      }
    },
    resetQuery() {
      this.sourceType = [];
      this.crud.resetQuery();
    },
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {},
    changeDept(e) {
      const { id } = e;
      this.userParams.deptIds = id;
    },
    //添加提交
    [CRUD.HOOK.afterValidateCU](crud) {
      if (crud.form.dataScope === "自定义" && crud.form.depts.length === 0) {
        this.$message({
          message: "自定义数据权限不能为空",
          type: "warning",
        });
        return false;
      } else if (crud.form.dataScope === "自定义") {
        const depts = [];
        crud.form.depts.forEach(function (data, index) {
          const dept = { id: data };
          depts.push(dept);
        });
        crud.form.depts = depts;
      } else {
        crud.form.depts = [];
      }
      return true;
    },
  },
};
</script>

<style scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
</style>
